<template>
	<div id="login-page" class="route-page">
			<div class="float-mask" v-if="loadingShow">
				<spinner type='bubbles'></spinner>
			</div>
			<p class="tit">WINTER</p>
			<div id="input-wrapper">
				<label for="w-username">
					
					<input type="number" name="w-username" placeholder="account" v-model="w_username"/>
				</label>
				<label for="w-password">
					
					<input type="password" name="w-password" placeholder="password" v-model="w_password"/>
				</label>
				<div id="LogIn" @click="userLogIn()">Log In</div>
			</div>
	</div>
</template>

<script>
	// 登录页
	import Vue from 'vue'
	import { Spinner,AjaxPlugin,Toast } from 'vux'
	import router from '../../router'
	Vue.use(AjaxPlugin)

	export default {
	  name: 'Login',
	  data(){
	  	return {
	  		w_username:'',
	  		w_password:'',
	  		loadingShow:false
	  	}
	  },
	  methods:{
	  	userLogIn(){
	  		let oThis = this;
	  		oThis.loadingShow = true;
	  		this.$http({
		  		url:`${Vue.config.API_GET_HEADER}login/cellphone?phone=${oThis.w_username}&password=${oThis.w_password}`,
		  		method: 'GET'
		  	}).then(function (response) {
		  			if(response.data.code===200){//登陆成功
		  				localStorage.logState = true;
		  				localStorage.userMsg = JSON.stringify(response.data.profile);
		  				// console.log(response.data.profile);
		  				
		  				oThis.$vux.toast.text('登录成功！', 'middle');
		  				router.go({name: 'Home'});
		  				
		  			}else if(response.data.code===415){
		  				oThis.$vux.toast.text('您的操作过于频繁，休息一下再来吧', 'middle');
		  			}else{
		  				oThis.$vux.toast.text('请输入正确的用户名和密码', 'middle');
		  			}


		  			oThis.loadingShow = false;
	      })
	  	}
	  },
	  components:{
	  	 Spinner,
	  	 Toast
	  }

	}
</script>


<style scoped>
	.tit{
		font-size:2rem; 
		padding-top:5rem;
		color:#939393;
		animation: titColorAni 7s linear infinite;
	}
	#login-page{
		background-image: url(../../assets/bg.jpg);
		background-size:101% auto;
		-webkit-filter:saturate(0);
		animation: colorAni 7s linear infinite;
	}
	@keyframes colorAni{
		0%{
			-webkit-filter:saturate(0);
		}
		50%{
			-webkit-filter:saturate(1);
		}
		100%{
			-webkit-filter:saturate(0);
		}

	}
	@keyframes titColorAni{
		0%{
			color:#939393;
		}
		50%{
			color:#363636;
		}
		100%{
			color:#939393;
		}

	}
	#input-wrapper{
		width:9rem;
		position: absolute;
		margin-left:-4.5rem;
		left:50%;
		bottom:2rem;
	}
	#input-wrapper input{
		border:none;
		outline:0;
		border-bottom:1px solid #fff;
		background:none;
		width:100%;
		line-height:1.5em;
		margin:.4rem 0;
		color:#fff;
		opacity: .7;
		font:100 .7rem sans-serif;
		padding:5px 0;
	}
	#input-wrapper input:focus{
		opacity: 1;
	}
	#input-wrapper input::placeholder{
		color:#fff;
	}
	#LogIn{
		color:#fff;
		padding:.2rem .5rem;
		border-radius:3px;
		border:1px solid #fff;
		font-size:.5rem;
		display: inline-block;
		margin:1rem auto 0;
		opacity: .7;
	}
	#LogIn:active{
		opacity: 1;
	}
</style>